<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"
	import="beans.UserBean,beans.EventBean,beans.VenueBean,beans.CommentBean,java.util.ArrayList,java.util.Date"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta charset="utf-8">
<title>
	<%
		EventBean event = (EventBean) session.getAttribute("currentEvent");
		out.print(event.getName() + " - drop.in");
	%>
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/jquery.rating.css" rel="stylesheet">

<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}

#sexyline {
	margin: 25px 0;
	height: 1px;
	background: #eeeee;
	background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white),
		color-stop(50%, grey) );
}

​
      div.thumbnail {
	display: block;
	position: relative;
}

div.thumbnail:hover .overlay {
	position: absolute;
	z-index: 3;
	width: 290px;
	height: 402px;
}

div.thumbnail .overlay .overlaycaption {
	text-align: center;
	position: absolute;
	height: 30px;
	line-height: 30px;
	width: 100%;
	z-index: 3;
	text-indent: -9999em;
	font-size: 11px;
	bottom: 0;
	overflow: hidden;
}

div.thumbnail:hover .overlaycaption {
	text-indent: 10px;
	background: rgb(255, 255, 255);
	/* for browsers that know rgba */
	background: rgba(255, 255, 255, 0.75);
}

div.thumbnail img {
	display: block;
}

div.smallskip {
	height: 10px;
}
#glowing {
      border: 0px solid #D11919;
    border-radius: 6px; 
    padding: 4px 4px 4px 4px;    
     
    -moz-animation-name: glow;
    -moz-animation-timing-function: ease-in;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-duration: 500ms;
	}
	@-moz-keyframes glow {
    0% { box-shadow: 0 0 5px #D11919; }
    100% { box-shadow: 0 0 20px #D11919; }
	}
	<% UserBean currentUser = (UserBean)session.getAttribute("currentSessionUser"); 
	if (currentUser.getAdmin())
		out.print(".navbar-inner { background: #a90329; background: -moz-linear-gradient(top,  #a90329 0%, #8f0222 44%, #6d0019 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); background: -webkit-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); background: linear-gradient(to bottom,  #a90329 0%,#8f0222 44%,#6d0019 100%);}");
		out.print(" .navbar .brand { color: white; }"); %> 
​
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/imgUpdater.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.MetaData.js"></script>
<script type="text/javascript" src="js/jquery.rating.js"></script>


<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144"
	href="ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114"
	href="ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72"
	href="ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed"
	href="ico/apple-touch-icon-57-precomposed.png">
</head>

<body>

	<div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="http://localhost:8080/dropin/LoginServlet">drop.in</a>
          <div class="nav-collapse">
            <ul class="nav pull-left">
              <li class="active pull-left"><a href="http://localhost:8080/dropin/LoginServlet">Home</a></li>
              <li class="pull-left"><a href="http://localhost:8080/dropin/eventcreation.jsp">Create a new event</a></li>
              <li class="dropdown" id="searchmenu"><a class="dropdown-toggle" data-toggle="dropdown" href="#searchmenu">Search<b class="caret"></b></a>
              <ul class="dropdown-menu">
              <li><a href="http://localhost:8080/dropin/searchuser.jsp">Search Users</a></li>
              <li><a href="http://localhost:8080/dropin/searchevent.jsp">Search Events</a></li>
              </ul>
              </li>
              </ul><ul class="nav pull-right">
						<% if (currentUser.getAdmin()) {
							out.print("<li class='dropdown' id='adminpanel'><a class='dropdown-toggle' data-toggle='dropdown' href='#adminmenu'>Admin Panel<b class='caret'></b></a><ul class='dropdown-menu'>");
              				out.print("<li><a href='http://localhost:8080/dropin/EventActionServlet?action=edit'>Edit Event</a></li>");
              				out.print("<li><a href='http://localhost:8080/dropin/EventActionServlet?action=delete'>Delete Event</a></li>");
              				out.print("</ul></li>"); } %>
              	<li class="dropdown pull-right" id="notifications">
              	<% ArrayList<EventBean> events = (ArrayList<EventBean>)session.getAttribute("usersevent");
    			int j = 0;
    			for (int i = 0; i < events.size(); i++) {
    				if (events.get(i).isNotification())
    				j++;
    			} %>
    			<a class="dropdown-toggle" data-toggle="dropdown" href="#notifications"> <span <% if (j>0) out.print("id='glowing'"); %>> Notifications (<% out.print(j); %>)</span><b class="caret"></b> </a>
   				<ul class="dropdown-menu">
      				<li style="padding-left: 5px;">Please rate your host/guest(s) for these events:</li>
         				<li class="divider"></li>
      
      			<% for (int i = 0; i < events.size(); i++) {
      			   		if (events.get(i).isNotification()) {
      			   			String startt = events.get(i).getStartTimeStamp().toString();
      			   		startt = startt.substring(0, 19);
            			startt = startt.replace("-", "");
            			startt = startt.replace(":", "");
            			startt = startt.replace(" ", "");
      			   			out.print("<li><a href='http://localhost:8080/dropin/EventServlet?host=" + events.get(i).getHost() + "&start=" + startt + "'>" + events.get(i).getName() + "</a></li>");
      			   		}
      			} %>
    			</ul>
  </li>
  <li class="pull-right"><a href="http://localhost:8080/dropin/LogoutServlet">Log Out</a></li>
				</div>
				<!--/.nav-collapse -->
			</div>
		</div>
	</div>

	<div class="container">

		<!-- Main hero unit for a primary marketing message or call to action -->
		<div class="hero-unit" style="padding: 10px 10px 10px 10px;">
			<div>
				<div style="float: right; text-align: right;">
					<span>Free Guest Spots:
						<h1>
							<%
								int freespots = event.getGuests() - event.getGuestList().size();
								out.print(freespots + "/" + event.getGuests());
							%>
						</h1>
					</span>
				</div>
				<h2>
					<%
						out.print(event.getName());
					%>
				</h2>
				<p>
					hosted by
					<%
					UserBean host = (UserBean) session.getAttribute("eventhost");
					out.print("<a href='http://localhost:8080/dropin/VisitServlet?visitid="
							+ host.getEmail() + "'>" + host.getName() + "</a>");
				%>
					- Type: <% out.print(event.getType()); %>
				</p>
			</div>
		</div>

		<div
			class="modal <% if (!event.isNotification()) out.print("hide"); %>"
			id="RateModal">
			<div class="modal-header">
				<h3>
					Rate your
					<% if (event.getHost().equals(currentUser.getEmail())) 
							out.print("guest(s)");
							else
							out.print("host"); %>:
				</h3>
			</div>
			<div class="modal-body">
				<form method="get" action="EventActionServlet">
					<input type="hidden" class="input-xlarge" id="action" name="action"
						value="rate">
					<%  if (event.getHost().equals(currentUser.getEmail())) {
							for (int k = 0; k < event.getGuestList().size(); k++) {
								out.print("<div><p style='font-size: 14px;'><a href='http://localhost:8080/dropin/VisitServlet?visitid="
										+ event.getGuestList().get(k).getEmail()
										+ "'>"
										+ event.getGuestList().get(k).getName() + "</a></p>");
								out.print("<p style='color: gray'> Lives in "
										+ event.getGuestList().get(k).getCity()
										+ ", "
										+ event.getGuestList().get(k).getCountry()
										+ " | Registered on: "
										+ event.getGuestList().get(k).getRegistration()
												.toString().substring(0, 16)
										+ ", Last seen on: "
										+ event.getGuestList().get(k).getLastLogin().toString()
												.substring(0, 16) + "</p></div>");
								for (int x = 1; x < 6; x++) {
									out.print("<input name='rate" + k + "' type='radio' class='star' value='" + x + "'/><div class='smallskip'></div>");
								}
							}
						} else {
							out.print("<div><p style='font-size: 14px;'><a href='http://localhost:8080/dropin/VisitServlet?visitid="
									+ event.getHost()
									+ "'>"
									+ host.getName() + "</a></p>");
							out.print("<p style='color: gray'> Lives in "
									+ host.getCity()
									+ ", "
									+ host.getCountry()
									+ " | Registered on: "
									+ host.getRegistration()
											.toString().substring(0, 16)
									+ ", Last seen on: "
									+ host.getLastLogin().toString()
											.substring(0, 16) + "</p></div>");
							for (int k = 1; k < 6; k++) {
								out.print("<input name='ratehost' type='radio' class='star' value='" + k + "'/>");
							}
						}
						%>
				
			</div>
			<div class="modal-footer">
				<button type="submit" class="btn btn-primary">Rate!</button>
			</div>
		</div>

		<div class="row">
			<div class="span4">
				<ul class="thumbnails">
					<li class="span4">
						<div class="thumbnail">
							<% UserBean user = (UserBean)session.getAttribute("currentSessionUser");
							if (user.getEmail().equals(event.getHost()))
								out.print("<span class='overlay'><a href='#FlyerModal' class='overlaycaption' data-toggle='modal'> Change flyer </a> </span>"); %>
							<img id="flyer" src="<% out.print(event.getFlyerURL()); %>"
								alt="" width="290" height="402">
						</div>
						<div class="modal hide" id="FlyerModal">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal">×</button>
								<h3>Insert the flyer URL</h3>
							</div>
							<div class="modal-body">
								<form class="form-horizontal">
									<fieldset>
										<label class="control-label" for="newurl">Flyer URL:</label>
										<div class="controls">
											<input type="text" class="input-xlarge" id="newurl"
												name="newurl" size="200">
											<p class="help-block"></p>
										</div>
									</fieldset>
								</form>
							</div>
							<div class="modal-footer">
								<a href="#" class="btn btn-primary" data-dismiss="modal"
									onclick="updateFlyer(newurl.value)">Change Flyer URL</a> <a
									href="#" class="btn btn-danger" data-dismiss="modal">Close</a>
							</div>
						</div>
						<div style="padding-left: 5px; padding-top: 10px;">
							<h4>Host Stats:</h4>
							<br />
							<p>Average Host Rating: <% Double ahr = host.getHostRatingAvg(); if (ahr.toString().length() < 4)
   								out.print(ahr.toString());
   							else
   								out.print(ahr.toString().substring(0, 4)); %></p>
							<p>Total # of hosted events: <% out.print(host.getTotalHosted()); %></p>
							<p>On drop.in since: <% out.print(host.getRegistration().toString().substring(0, 19)); %></p>
							<p>Last Seen: <% out.print(host.getLastLogin().toString().substring(0, 19)); %></p>
						</div>
					</li>
				</ul>
			</div>
			<div class="span8">
				<h3>Event Details:</h3>
				<p><strong>Total number of participants: <% out.print(event.getParticipants()); %></strong></p>
				<p>
					<strong>This event will be hold at:</strong>
				</p>
				<p>
					<%
						VenueBean venue = event.getVenue();
						out.print(venue.getName());
					%>
				</p>
				<span> <%
 	out.print(venue.getAddress() + " - " + venue.getCity() + " - "
 			+ venue.getRegion() + " - " + venue.getCountry() + " ");
 %>
				</span><span><a
					href="http://maps.google.com/maps?q= <%out.print(venue.getAddress().replace(" ", "+") + ",+"
					+ venue.getCity() + ",+" + venue.getRegion() + ",+"
					+ venue.getCountry());%>"
					target="_blank"> <i class="icon-map-marker"></i>Look it up on
						Google Maps
				</a></span>
				<div class="smallskip"></div>
				<p>
					on
					<%
					String start = event.getStartTimeStamp().toString();
					out.print(start.substring(0, 10));
				%>; the event will start at
					<%
					out.print(start.substring(11, 16));
				%>
					and finish at
					<%
					out.print(event.getEndTimeStamp().toString().substring(11, 16));
				%>.
				</p>
				<div class="modal hide" id="GuestsModal">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">×</button>
						<h3>People attending this event:</h3>
					</div>
					<div class="modal-body">
						<%
							for (int l = 0; l < event.getGuestList().size(); l++) {
								out.print("<div><p style='font-size: 14px;'><a href='http://localhost:8080/dropin/VisitServlet?visitid="
										+ event.getGuestList().get(l).getEmail()
										+ "'>"
										+ event.getGuestList().get(l).getName() + "</a></p>");
								out.print("<p style='color: gray'> Lives in "
										+ event.getGuestList().get(l).getCity()
										+ ", "
										+ event.getGuestList().get(l).getCountry()
										+ " | Registered on: "
										+ event.getGuestList().get(l).getRegistration()
												.toString().substring(0, 16)
										+ ", Last seen on: "
										+ event.getGuestList().get(l).getLastLogin().toString()
												.substring(0, 16) + "</p></div>");
							}
							if (event.getGuestList().size() == 0)
								out.print("<p style='font-size: 14px; font-style: italic; padding-top: 30px; padding-bottom: 30px;'>Nobody has confirmed participation to this event yet.");
						%>
					</div>
					<div class="modal-footer">
						<a href="#" class="btn" data-dismiss="modal">Close</a>
					</div>
				</div>
				<p>
					<strong>Event Description:</strong>
				</p>
				<p>
					<%
						out.print(event.getDescription());
					%>
				</p>
				<%	if (user.getEmail().equals(event.getHost())) {
					out.print("<a href='http://localhost:8080/dropin/EventActionServlet?action=edit' class='btn btn-danger' style='margin-left: auto; margin-right: auto;'>Edit event details</a>");
				} else {
					boolean present = false;
					//UserBean currentUser = (UserBean) session.getAttribute("currentSessionUser");
					for (int i = 0; i < event.getGuestList().size(); i++) {
						if (event.getGuestList().get(i).getEmail()
								.equals(currentUser.getEmail()))
							present = true;
					}
					java.util.Date now = new Date();
					if (now.before(event.getStartTimeStamp())) {
						if (present)
							out.print("<a href='http://localhost:8080/dropin/EventActionServlet?action=remove' class='btn btn-danger' style='margin-left: auto; margin-right: auto;'>Cancel my participation</a>");
						else
							if (currentUser.getPoints() > 0)
								out.print("<a href='http://localhost:8080/dropin/EventActionServlet?action=attend' class='btn btn-primary' style='margin-left: auto; margin-right: auto;'>Do you want to attend this event? Drop In!</a>");
							else
								out.print("<a href='#' class='btn btn-primary disabled' style='margin-left: auto; margin-right: auto;'>You don't have enough points to attend this event!</a>");
						} else {
							if (present)
								out.print("<a href='#' class='btn btn-danger disabled' style='margin-left: auto; margin-right: auto;'>The event is already started, you can't cancel your participation</a>");
							else
								out.print("<a href='#' class='btn btn-primary disabled' style='margin-left: auto; margin-right: auto;'>The event is already started, you can't drop in!</a>");
					} }
				%>
				<span style="padding-left: 20px";><a href="#GuestsModal"
					data-toggle="modal"> <i class="icon-user"></i> Show the guests
						list
				</a></span>

				<div id="sexyline"></div>
				<h3>Comments on this event:</h3>
				<%
					ArrayList<CommentBean> eventComments = (ArrayList<CommentBean>) session.getAttribute("eventcomments");
					if (eventComments.isEmpty()) {
						out.print("<blockquote style='text-align: center; height: 100px; font-size: 18px; font-style: italic; padding-top: 70px;'>There are no comments to display!</blockquote>");
					} else {
						for (int i = 0; i < eventComments.size(); i++) {
							out.print("<blockquote>"
									+ eventComments.get(i).getBody()
									+ "<small>Sent by <a href='http://localhost:8080/dropin/VisitServlet?visitid="
									+ eventComments.get(i).getWriter() + "'>");
							out.print(eventComments.get(i).getWriterName());
							out.print("</a> on ");
							String msgdate = (eventComments.get(i).getStamp()
									.toString());
							out.print(msgdate.substring(0, 16)
									+ "</small></blockquote>");
						}
					}
				%>
				<a href="http://localhost:8080/dropin/writecomment.jsp" class="btn"
					style="margin-left: auto; margin-right: auto;">Leave a comment</a>
			</div>
		</div>
	</div>
	<footer>
	<p style="text-align: center; margin-top: 50px; color: grey;">&copy;
		PiP 2012</p>
	</footer>

	</div>
	<!-- /container -->

	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script
		src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="js/bootstrap-alert.js"></script>
	<script src="js/bootstrap-modal.js"></script>
	<script src="js/bootstrap-dropdown.js"></script>
	<script src="js/bootstrap-scrollspy.js"></script>
	<script src="js/bootstrap-tab.js"></script>
	<script src="js/bootstrap-tooltip.js"></script>
	<script src="js/bootstrap-popover.js"></script>
	<script src="js/bootstrap-button.js"></script>
	<script src="js/bootstrap-collapse.js"></script>
	<script src="js/bootstrap-carousel.js"></script>
	<script src="js/bootstrap-typeahead.js"></script>

</body>
</html>
